import React from 'react'
import {connect} from 'react-redux'
import { Form,Input,Button } from 'antd'
import "./login.css"

/**
 *	1> 从文档上看v4版ant design比v3简化不少，这个Form就是一个例子。
 */
export default connect(null,null)(
	class extends React.Component{
		render(){
			const layout = {
  				labelCol: { span: 8 },
  				wrapperCol: { span: 16 },
			};
			const tailLayout = {
				wrapperCol: { offset: 8, span: 16 },
			};
			return (
				<div className="login-form-frame">
					<Form
						{...layout}
						name="login-form"
						onFinish={this.props.onFinish}
      					onFinishFailed={this.props.onFinishFailed}>
      					<Form.Item
      						label="账号"
      						name="username"
      						rules={[{ required: true, message: 'Please input your username' }]}>
      						<Input placeholder="Please input your username" />
      					</Form.Item>

      					<Form.Item
					    	label="Password"
					        name="password"
					        rules={[{ required: true, message: 'Please input your password!' }]}>
					    	<Input.Password placeholder="Please input your password" />	
					    	</Form.Item>
					    <Form.Item {...tailLayout}>
        					<Button type="primary" htmlType="submit">
          						Login
        					</Button>
      					</Form.Item>
					</Form>
				</div>
			)
		}
	}
)

